<template>
  <div class="search">
    <div class="search-header">
      <div class="search-title"><span v-text="keyword"></span>的搜索结果</div>
    </div>
    <div class="search-content">
      <div class="search-empty" v-if="(searchList.length === 0 && connect) || (!connect && !status)">没有搜索结果</div>
      <ul>
        <li v-for="item in searchList" class="search-li">
          <div class="li-info">
            <router-link :to="{name:'MusicInfo', params: {type: getType(item.type),id: item.songId}}">
              <span class="li-title" v-text="item.songName"></span>
            </router-link>
            <span class="li-singer" v-if="item.singer" v-text="item.singer"></span>
            <span class="li-type" v-if="item.type">（<span v-text="getTypeString(item.type)"></span>）</span>
          </div>
          <div class="li-controller">
            <div class="li-controller-btn" @click="playNewMusic(item.songId, getType(item.type))"><i class="fa fa-play fa-fw"></i>播放</div>
            <div class="li-controller-btn" @click="addMusicList(item)"><i class="fa fa-plus fa-fw"></i>添加</div>
          </div>
        </li>
      </ul>
      <div class="search-next-btn" v-if="searchList.length>0" @click="getSearch(page)">获取更多</div>
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex';

import APIURL from '../APIURL';

export default {
  name: 'search',
  data() {
    return {
      connect: false,
      status: true,
      page: 1,
      isLastPage: false,
      keyword: '',
      searchList: [],
    };
  },
  computed: {
    ...mapState({
      id: state => state.musicplayer.id,
      musicList: state => state.musicplayer.musicList,
    }),
  },
  watch: {
    $route() {
      this.init();
    },
  },
  methods: {
    getType(typeNum) {
      switch (typeNum) {
        case 1:
          return 'yc';
        case 2:
          return 'fc';
        case 3:
          return 'bz';
        default:
          return '';
      }
    },
    getTypeString(typeNum) {
      switch (typeNum) {
        case 1:
          return '原创';
        case 2:
          return '翻唱';
        case 3:
          return '伴奏';
        default:
          return '';
      }
    },
    getSearch(page) {
      return APIURL.SEARCH(this.keyword, page)
        .then((res) => {
          const data = res.data;
          const info = data.data;
          this.connect = true;
          if (data.success) {
            this.status = true;
            if (info.length > 0) {
              this.page += 1;
            } else {
              this.isLastPage = true;
            }
            this.searchList.push(...info);
          } else {
            this.status = false;
          }
        })
        .catch(() => {
          this.connect = false;
          this.status = false;
        });
    },
    playNewMusic(id, type) {
      this.$store.dispatch('getMusic', { id, type });
    },
    addMusicList(info) {
      this.$store.commit('addMusicList', info);
    },
    init() {
      this.keyword = this.$route.params.keyword;
      this.searchList.length = 0;
      this.getSearch();
    },
  },
  mounted() {
    this.init();
  },
};
</script>
<style lang="scss" scoped>
@import '../scss/theme.scss';
.search-header {
  display: flex;
  align-items: flex-end;
  margin-bottom: 25px;
  .search-title {
    margin-left: 50px;
    font-size: 2.8rem;
  }
  .search-controller-btn {
    cursor: pointer;
    font-size: 1.4rem;
    margin-left: 20px;
  }
}

.search-content {
  .search-empty {
    text-align: center;
    font-size: 2rem;
  }
  .search-li {
    height: 40px;
    border-bottom: 1px solid #999999;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    .li-info {
      line-height: 40px;
      .li-title {
        font-size: 1.6rem;
        margin-left: 30px;
        color: $color_accent;
      }
      .li-singer {
        font-size: 1.2rem;
        margin-left: 20px;
      }
      .li-type {
        font-size: 1.2rem;
        margin-left: 20px;
      }
    }
    .li-controller {
      display: flex;
      flex-direction: row;
      justify-content: flex-end;
      align-items: center;
      .li-controller-btn {
        cursor: pointer;
        margin-right: 30px;
        font-size: 1.2rem;
      }
    }
  }
  .search-next-btn {
    margin: auto;
    cursor: pointer;
    margin-top: 20px;
    width: 120px;
    height: 40px;
    border: 2px solid $color_primary;
    text-align: center;
    line-height: 40px;
    font-size: 1.5rem;
  }
}
</style>
